<template>
  <div class="register_container">
    <div class="img_bg"></div>
    <div class="register_box">
      <p>加入我们</p>
      <!-- 注册表单 -->
      <el-form :model="form" :rules="rules" ref="form" label-width="0px" class="register_form">
        <!-- 作者名 -->
        <el-row>
          <el-form-item>
            <el-input placeholder="请输入名称" v-model="form.userName" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
        </el-row>
        <!-- 邮箱 -->
        <el-row>
          <el-form-item prop="userMail">
            <el-input placeholder="请输入邮箱" v-model="form.userMail" prefix-icon="el-icon-message"></el-input>
          </el-form-item>
        </el-row>
        <!-- 密码 -->
        <el-row>
          <el-form-item prop="userPass">
            <el-input placeholder="请输入密码" v-model="form.userPass" prefix-icon="el-icon-lock" show-password></el-input>
          </el-form-item>
        </el-row>
        <!-- 重输密码 -->
        <el-row>
          <el-form-item prop="userPassAgain">
            <el-input placeholder="请再次输入密码" v-model="form.userPassAgain" prefix-icon="el-icon-lock" show-password></el-input>
          </el-form-item>
        </el-row>
        <!-- 验证码 -->
        <el-row :gutter="38">
          <el-col :span="16">
            <el-form-item>
              <el-input placeholder="请输入收到的验证码" v-model="form.userCheck" prefix-icon="el-icon-arrow-right"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button :disabled="dis" @click="getCode">
                <template v-if="sending">获取验证码</template>
                <template v-else>{{second}}秒后重发</template>
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 按钮 -->
        <el-form-item class="btn_register">
          <el-button type="primary" @click="register">注册</el-button>
        </el-form-item>
        <el-form-item class="backToLogin">
            已有帐号？
            <el-button type="text"  @click="toLogin" >返回登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data () {
    var validatePass = (rule, value, callback) => {
      var reg = /^[A-Za-z0-9]{6,12}$/
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!reg.test(this.form.userPass)) {
        callback(new Error('格式错误! 正确格式：6-12位，包含大小写字母数字,不能有特殊字符'))
        // this.$refs.form.validateField('userPassAgain')
      } else {
        this.$refs.form.validateField('userPassAgain')
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.form.userPass) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {
        userName: '',
        userMail: '',
        userCheck: '',
        userPass: '',
        userPassAgain: ''
      },
      sending: true,
      second: 60,
      check: false,
      dis: false,
      rules: {
        userPass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        userPassAgain: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        userMail: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    timeDown () {
      const result = setInterval(() => {
        --this.second
        if (this.second < 0) {
          clearInterval(result)
          this.sending = true
          this.dis = false
          this.second = 60
        }
      }, 1000)
    },
    // 获取验证码
    getCode () {
      if (this.form.userMail !== '') {
        this.dis = true
        this.sending = false
        this.timeDown()
        console.log(this.dis)
        this.$axios({
          methods: 'post',
          url: '/user/getCode',
          headers: { 'content-type': 'application/x-www-form-urlencoded' },
          params: {
            userMail: this.form.userMail,
            tag: true
          }
        })
          .then((response) => {
            console.log(response)
            if (response.data.data[0] === false) {
              alert(response.data.msg)
            } else {
              this.$message({
                type: 'success',
                message: '已发送'
              })
            }
          })
          .catch(function (error) { console.log(error) })
      }
    },
    // 点击 注册按钮
    register () {
      // 注册前的表单与验证
      // 根据验证结果 决定是否发起注册请求
      // Message弹出框提示注册是否成功
      /* userName: '',
        userMail: '',
        userCheck: '',
        userPass: '',
        */
      if (this.form.userMail !== '' && this.form.userCheck !== '' && this.form.userPass !== '' && this.form.userPass === this.form.userPassAgain) {
        this.$axios({
          methods: 'post',
          url: '/user/register',
          headers: { 'content-type': 'application/x-www-form-urlencoded' },
          params: {
            userName: this.form.userName,
            userMail: this.form.userMail,
            userCheck: this.form.userCheck,
            userPass: this.form.userPass,
            userPassAgain: this.form.userPassAgain
          }
        })
          .then((response) => {
            console.log(response)
            this.check = response.data.data[0]
            if (this.check === true) {
              alert('注册成功')
              const id = response.data.data[1]
              this.$router.push({ path: '/home/' + id })
            } else {
              alert(response.data.msg)
            }
          })
          .catch(function (error) { console.log(error) })
      }
    },
    // 点击 返回登录按钮， 跳转到登录页面
    toLogin () {
      this.$router.push('/welcome')
    }
  }

}
</script>

<style lang="less" scoped>
.register_container{
    .img_bg {
        background: url("../assets/bgimg-dark.jpg");
        background-size: 100% auto;
        height: 100%;
        position: fixed;
        width: 100%;
    }
    // background-color: #eee;
    /* border-radius: 10px;
    margin: 0 25px 0 25px; */
    height: 100%;
}

.register_box{
    width: 450px;
    height: 500px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    // box-shadow: 0 0 10px #ccc;
}

p {
    font-size: 22px;
    font-weight: bold;
    display: flex;
    justify-content:center;
}

.register_form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

.btn_register {
    display: flex;
    justify-content: center;
}

.backToLogin {
    display: flex;
    justify-content:center;
    color: #999;
}

</style>
